<template>
  <div>
   <el-row>
       <el-col :span="9">
              <el-table
                :data="commenrList"
                border
                style="width: 100%">
                <el-table-column
                prop="user.userName"
                label="评论人"
                width="190">
                </el-table-column>
                <el-table-column
                prop="comContent"
                label="评论内容"
                width="190">
                </el-table-column>
                <el-table-column
                label="点赞"
                width="220">
                    <template slot-scope="scope">
                        <span v-if="checkLike(scope.row)"><img :src=add @click="addLikes(scope.row)"></span>
                        <span v-else><img :src=cancel @click="cancelLikes(scope.row)"></span>
                    <el-badge :value="scope.row.count" class="item"></el-badge>
                </template>
                </el-table-column>
            </el-table>
       </el-col>
   </el-row>
   
  </div>
</template>

<script>
import {mapState,mapActions} from 'vuex'
export default {
    data(){
        return {
            add:require('../../assets/add.png'),
            cancel:require('../../assets/cancel.png'),
        }
    },
    computed:{
        ...mapState('demo',['commenrList'])
    },
    methods:{
        ...mapActions('demo',['getComList']),
        async addLikes(row){
            var response = await this.ajax.postSubmit("/project/users/addLikes",{userId:row.user.userId,commentId:row.comId});
            if(response.status == 1){
                this.checkLike(row)
                this.getComList();
            }
        },
        async cancelLikes(row){
            var response = await this.ajax.postSubmit("/project/users/cancelLikes",{userId:row.user.userId,commentId:row.comId});
            if(response.status == 1){
                this.checkLike(row)
                this.getComList();
            }
        },
        async checkLike(row){
            var response = await this.ajax.getSubmit("/project/users/checkLikes",{comId:row.comId});
            console.log(response);
            return response;
        }
    },
    created(){
        this.getComList();
    }

}
</script>

<style>

</style>